<template>
  <div class="tuku">
    <el-dialog title="选择图片" center :visible.sync="log" width="1000px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <div class="flex">
        <div v-for="item in data" :key="item.imgId" style="height: 150px; margin: 10px 10px 0 0;">
          <div style="width: 104px; height: 104px; border: 2px #ddd solid;" :class="xuanzhonglist.includes(item.imgId)?'act':''" class="flexcc">
            <img :src="IP_URL + '/api/img/get/file?fileUrl=' + item.img"  @click="xuanzhong(item)" style="max-width: 100px; max-height: 100px;" >
          </div>

          <div class="flexcc" v-if="moren != item.imgId" style="margin-top: 10px; cursor: pointer;" @click="morenx(item)">设为默认</div>
          <div class="flexcc" v-if="moren == item.imgId" style="margin-top: 10px; cursor: pointer; color: #005AFF;" @click="morenx2()">取消默认</div>
        </div>


      </div>

      <span slot="footer" class="dialog-footer">

        <el-button type="danger" round @click="add">确定</el-button>
      </span>

    </el-dialog>

  </div>
</template>

<script>
  import { getalltu } from '@/api/xitong'

  export default {
    name: 'tuku',
    props:['imgIds','imgId'],
    data() {
      return {

        log:true,
        value:[],
        data:[],
        xuanzhonglist:[],
        moren:"",
        IP_URL:process.env.IP_URL
      }
    },
    created() {
      this.xuanzhonglist = this.imgIds
      this.moren = this.imgId

      getalltu().then(response => {
        this.data = response.data
      })
    },
    beforeDestroy() {

    },
    mounted() {


    },
    methods: {
      morenx2:function(){
        this.moren = ""
      },
      morenx:function(item){
        this.moren = item.imgId
      },
      xuanzhong:function(item){

        if(this.xuanzhonglist.includes(item.imgId)){
          this.xuanzhonglist.splice(this.xuanzhonglist.indexOf(item.imgId),1)
        }else{
          this.xuanzhonglist.push(item.imgId)
        }
      },
      add:function(){
        let obj = {
          xuanzhong:this.xuanzhonglist,
          moren:this.moren
        }
        this.$emit('duotu',obj)
      }
    }
  }
</script>


<style scoped lang="less">
  .tuku{
    .act{ border: 2px #f00 solid !important;}
  }
</style>
